<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<title>用户管理</title>

</head>
<body>
<div id="app">
<h1 style="text-align: center;">用户管理</h1>
<template>
	<el-table :data="student_data" style="width: 100%" stripe>
		<el-table-column type="selection" width="30"></el-table-column>
		<el-table-column prop="id" label="编号" width="120" show-overflow-tooltip></el-table-column>
		<el-table-column prop="name" label="姓名" width="100" show-overflow-tooltip></el-table-column>
		<el-table-column prop="sex" label="性别" width="70" show-overflow-tooltip></el-table-column>
		<el-table-column label="操作" show-overflow-tooltip>
			<template slot="header" slot-scope="slot">
				<samp>操作&emsp;</samp>
				<el-button type="info" size="mini" round >添加</el-button>
				
				
				
				
				<el-button type="danger" size="mini" round @click="open">删除所选</el-button>
			</template>
			<template>
				<el-button type="text" @click="open"></el-button>
			</template>
			<template slot-scope="scope">
			
				<el-button type="primary" size='mini'round @click="dialogFormVisible = true">编辑</el-button>
				
				
				
				<el-button type="danger" size="mini" round>删除</el-button>
				
				
				
				<el-dialog title="修改列表" :visible.sync="dialogFormVisible">
				  <el-form :model="form">
					<el-form-item label="修改名字" :label-width="formLabelWidth">
					  <el-input v-model="form.name" autocomplete="off" placeholder="请输入姓名"
					  style='width: 150px;' suffix-icon="el-icon-user-solid"></el-input>
					</el-form-item>
					
					<el-form-item label="修改性别" :label-width="formLabelWidth"   style='width:270px;' >
					  <el-select v-model="form.region" placeholder="性别">
						<el-option label="男" value="boy"></el-option>
						<el-option label="女" value="girl"></el-option>
					  </el-select>
					</el-form-item>
				  </el-form>
				  <div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
				</div>
			</template>
		</el-table-column>
	</el-table>
</template>
</div>
<script>
	function Student(id,name,sex){
		this.id=id;
		this.name=name;
		this.sex=sex;
	}
	
	
new Vue({
el:"#app",
data() {
return {
student_data: [{
id: '1',
name: '张三',
sex:'男'
}, {
id: '2',
name: '李四',
sex:'男'
}, {
id: '3',
name: '王五',
sex:'男'
},{
id: '4',
name: '赵六',
sex:'男'
},
{
id: '5',
name: '刘七',
sex:'男'
},{
id: '6',
name: '拐八',
sex:'男'
}],
multipleSelection: [],
	dialogTableVisible: false,
	dialogFormVisible: false,
	form: {
	  name: '',
	  region: '',
	  date1: '',
	  date2: '',
	  delivery: false,
	  type: [],
	  resource: '',
	  desc: ''
	},
	formLabelWidth: '120px'
};
},
methods: {
	
open() {
this.$confirm('确定删除？', '提示', {
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  type: 'warning'
}).then(() => {
  this.$message({
	type: 'success',
	
	message: '删除成功!'
  });
}).catch(() => {
  this.$message({
	type: '',
	message: '已取消删除'
  });          
});
}
}
});

</script>
</body>
</html>

